<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="Templates/DefaultTemplate.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:insert name="head-title">
        <title>Login | Merlion's ERP System</title>
    </ui:insert>
    
    <ui:define name="left">
        <h:form style="width: 100%;">  
            <p:panel id="leftpanel" header="User Log In" style="width: 100%;" > 
                
                <h:outputText value="Select User Type" />
                <h:selectOneMenu  value="#{controller.userType}" style="width: 100%;"> 
                    <f:selectItem itemLabel="Staff" itemValue="staff" />  
                    <f:selectItem itemLabel="Customer" itemValue="customer" />
                </h:selectOneMenu>
                <div style="padding: 5px"/>
                
                <h:outputLabel for="username" value="Username:" />  
                <p:inputText value="#{controller.userName}"   
                        id="username" required="true" label="username" 
                        requiredMessage="Username is required."
                        style="width: 100%;"/>  
                <div style="padding: 5px"/>
                
                <p:message for="username" /> 
                <div style="padding: 5px"/>
                
                <h:outputLabel for="password" value="Password:" />  
                <p:password value="#{controller.password}" minLength = "0"  
                        id="password" required="true" label="password" feedback="false"
                        requiredMessage="Password is required."
                        style="width: 100%;"/> 
                <div style="padding: 5px"/>
                
                <p:message for="password" /> 
                <div style="padding: 5px"/>
                
                <div style="margin-left: auto; margin-right: auto; text-align: center; border: 0px;">
                    <h:panelGrid columns="2">
                        <p:commandButton value="Log In" actionListener="#{controller.login}" type="submit" ajax="true" update="leftpanel" />
                        <p:ajaxStatus style="width:16px;height:16px;">   
                            <f:facet name="start">   
                                <p:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" /> 
                            </f:facet> 

                            <f:facet name="complete">   
                                <h:outputText value="" />   
                            </f:facet>   
                        </p:ajaxStatus> 
                    </h:panelGrid>
                    <p:messages />
                </div>
                
            </p:panel> 
                         
        </h:form>  
    </ui:define>
    
    <ui:define name="content">
        <p:panel header="Lorem Ipsum"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed velit ac urna tempus accumsan ac id metus. Integer velit lorem, suscipit et auctor vitae, porttitor non sem. Nullam ac lacus nisl. Sed tellus eros, rhoncus ut vulputate id, sollicitudin et leo. In felis turpis, consequat ut bibendum et, euismod sed nisi. Aenean sit amet lectus non arcu tincidunt tempus. Etiam a diam purus. Etiam ut nisl eu justo hendrerit rhoncus. Nam et lorem mauris.

Quisque nec mi ut mi suscipit porta ut varius nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pulvinar nulla eu dui scelerisque sit amet dignissim nisi ullamcorper. Etiam adipiscing nunc mattis mi dapibus non convallis purus fringilla. Suspendisse eget felis arcu, quis aliquam mi. Etiam porttitor, nisi ut ullamcorper fermentum, enim sem vestibulum nibh, a hendrerit tellus est eu sapien. Praesent eget nulla ac metus condimentum laoreet.

Quisque ligula tortor, pellentesque in pretium ut, imperdiet et lorem. Nullam blandit molestie felis in placerat. Pellentesque tortor metus, faucibus non malesuada non, gravida semper velit. Nulla facilisi. Aenean iaculis venenatis ligula et pretium. Vivamus non viverra velit. Quisque laoreet fringilla enim, non congue turpis condimentum a. Nam dui ligula, vestibulum vitae molestie vel, blandit eu lorem. Sed volutpat gravida est sed eleifend.

Ut pellentesque ultricies purus eget tempus. Aenean tempus arcu sit amet nibh mollis bibendum sagittis quam tempus. Proin sit amet erat non purus laoreet egestas. Nulla imperdiet bibendum tortor in vehicula. Cras quis lectus lacus. Quisque in orci id nibh sodales ullamcorper vel sed ante. Praesent tincidunt justo vitae tellus euismod imperdiet. Sed congue lacus eget eros egestas cursus quis eu lacus. Duis tempor faucibus leo non luctus. Mauris id urna vel ante vulputate pulvinar. Donec a ligula et urna malesuada hendrerit. Mauris ultricies cursus elit, vel lobortis mi aliquam non.

Fusce ut neque tellus, a commodo turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan eros sit amet odio elementum feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut tempus velit. Sed vel suscipit nulla. Mauris id nunc ac velit placerat consequat vel nec arcu.
        </p:panel>
    </ui:define>

</ui:composition>
